<template>
  <div class="page-container">
    <div class="content-card ">
      <!-- 操作栏 -->
      <div class="flex items-center justify-between">
         <div class="table-title flex items-center">
          <el-icon><UserFilled /></el-icon>
          <span class="ml-2">菜单列表</span>
        </div>
      <div class="action-buttons mb-3">
        <el-button type="primary" @click="handleAdd" icon="Plus"> 添加菜单 </el-button>
      </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="menuList"
        style="width: 100%"
        row-key="id"
        empty-text="暂无数据"
        lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{ background: '#f9fafb', color: '#374151', fontWeight: 600 }"
      >
        <el-table-column prop="id" label="ID" width="80" align="center" />

        <el-table-column prop="type" label="菜单类型" width="120" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.type === 0" type="success">目录</el-tag>
            <el-tag v-else-if="scope.row.type === 1" type="primary">菜单</el-tag>
            <el-tag v-else-if="scope.row.type === 2" type="info">按钮</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="菜单名称" min-width="160" />
        <el-table-column prop="path" label="路径" min-width="180" />
        <el-table-column prop="component" label="前端组件路径" min-width="200" />

        <el-table-column prop="sort" label="排序" width="120" align="center">
          <template #default="scope">
            <el-input
              v-model="scope.row.sort"
              type="number"
              size="small"
              style="width: 80px"
              @change="changeEdit(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
                active-text="启用"
              inactive-text="禁用"
              inline-prompt
              @change="changeEdit(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small"  type="primary" @click="handleEdit(scope.row)" icon="Edit">
              编辑
            </el-button>
            <el-button  size="small" type="danger"  @click="handleDelete(scope.row)" icon="Delete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹窗 -->
    <edit ref="editRef" @success="getLists" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getMenuListApi, deleteMenuApi, updateMenuApi } from '@/api/auth'
import edit from './edit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const menuList = ref([])

const editRef = ref()

const getLists = async () => {
  const res = await getMenuListApi({})
  menuList.value = res.data
}
const handleAdd = () => {
  editRef.value.open()
  editRef.value.setFormData()
  editRef.value.getParentMenuList()
}

const handleEdit = (row: any) => {
  editRef.value.open()
  editRef.value.setFormData(row)
  editRef.value.getParentMenuList()
}
const changeEdit = async (row: any) => {
  await updateMenuApi(row)
  getLists()
}
const handleDelete = async (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteMenuApi(row.id).then(() => {
      ElMessage.success('删除成功')
    })
  })
}
getLists()
</script>

<style scoped>



/* 搜索表单样式 */
.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* 内容卡片样式 */
.content-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
}
.table-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}
</style>
